<template>
    <div class="container">
        <module-title title="人才发展环境"></module-title>
        <r-text text="人才服务" style="margin: 20px 0 0 20px"></r-text>
        <div class="flexbox">
          <div class="rcfwbox" v-for="(item,index) in rcfwdata.value" :key="index">
            <div class="rcfwcontent">
              <p class="txtbox"><span class="bluekey">{{item.value}}</span><b>次</b></p>
              <p class="txtbox">{{item.name}}</p>
            </div>

          </div>
          <div ref="qyChart" style="height:185px"  class="chart"></div>
        </div>

        <div class="dashDivider" style="margin-top:0"></div>
        <r-text text="人才政策" style="margin: 20px 0 0 20px"></r-text>
        <div class="flex" style="padding: 20px;justify-content:space-between;text-align:left">
            <div class="flex">
                <img src="../../assets/icon-money.png">
                <div style="padding-left:4px">
                    <div class="label">奖补金额</div>
                    <div class="value">{{value1}}<span class="unit">万元</span></div>
                </div>
            </div>
            <div class="flex">
                <img src="../../assets/icon-user-count.png">
                <div style="padding-left:4px">
                    <div class="label">政策惠及人数</div>
                    <div class="value">{{value2}}<span class="unit">人</span></div>
                </div>
            </div>
            <div class="flex">
                <img src="../../assets/icon-user-avg.png">
                <div style="padding-left:4px">
                    <div class="label">人才补贴政策数量</div>
                    <div class="value">{{value3}}<span class="unit">个</span></div>
                </div>
            </div>
        </div>
        <div ref="zsqkChart" style="height:250px"></div>
        <div class="dashDivider" style="margin-top:0"></div>
        <cycle-board></cycle-board>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue'
import RText from '../RText.vue'
import * as echarts from 'echarts';
import CycleBoard from './CycleBoard.vue';
export default {
    components: { ModuleTitle, RText, CycleBoard },
    data() {
        return {
            chart1: null,
            chart2: null,
            value1: null,
            value2: null,
            value3: null,
            qyChartData:[],
            rcfwdata:{
              value:[
                {name:'人才招聘会场数',value:17},
                {name:'提供岗位数',value:23571}
              ],
              cbl:100
            },
            /*qyChartData:[{
                name: '2022-01',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2022-02',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2022-03',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2022-04',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            },{
                name: '2022-05',
                value: Math.floor(Math.random() * 500 + 500),
                value2: Math.floor(Math.random() * 500 + 500),
            }],*/
            zsqkChartData:[],
            /*zsqkChartData: [{
                name: '2017',
                value1: Math.floor(Math.random() * 500 + 500)
            },{
            name: '2018',
                value1: Math.floor(Math.random() * 500 + 500)
        },{
            name: '2019',
                value1: Math.floor(Math.random() * 500 + 500)
        },{
            name: '2020',
                value1: Math.floor(Math.random() * 500 + 500)
        },{
            name: '2201',
                value1: Math.floor(Math.random() * 500 + 500)
        }]*/
        }
    },
    mounted() {
            this.resetData();

        setInterval(() => {

            this.resetData();


        }, 60*1000);
    },
    methods: {
        resetData() {

            let params = {};
            let url = '/dyrl/screen/query/hyzs'
            //let url='/jhApi/dsb/getSa02';
            this.$api.commonPost(url, params).then(res => {

                console.log('调用hyzs接口');
                if (res.data.code === 0) {
                    this.rcfwdata = res.data.result.rcfwdata;
                    this.zsqkChartData = res.data.result.zsqkChartData;
                    //this.value1 = res.data.result.value1;
                    this.value1 = res.data.result.value1;
                    this.value2 = res.data.result.value2;
                    this.value3 = res.data.result.value3;
                    this.showChart(this.chart1, 'qyChart', this.getChart1Data());
                    this.showChart(this.chart2, 'zsqkChart', this.getChart2Data());

                } else {
                    console.log("error:");
                    this.$message({
                        type: 'error',
                        message: res.data.code,
                        duration: 1500
                    })
                }

            })
        },


        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear()
            }
            this.$refs[id].setAttribute('_echarts_instance_','')
            instance.setOption(option,true);
            this.$forceUpdate();
           // console.log('showChart');
        },
      getChart1Data() {
          let data = this.rcfwdata.cbl
        return {
          series: [
            {
              type: 'liquidFill', //水位图
              radius: '70%', //显示比例
              center: ['50%', '50%'], //中心点
              amplitude: 20, //水波振幅
              data: [.5,.5, .5], // data个数代表波浪数
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(6, 95, 184, 0)',
                    },
                    {
                      offset: 1,
                      color: '#65D2FF',
                    },
                  ],
                  globalCoord: false,
                },
              ], //波浪颜色
              backgroundStyle: {
                borderWidth: 1, //外边框
                color: 'transparent'
                // color: '', //边框内部填充部分颜色
              },
              label: {
                //标签设置
                position: ['50%', '50%'],
                formatter: `${data}%\n{label|群演工伤\n参保率}`, //显示文本,
                textStyle: {
                  fontSize: 24, //文本字号,
                  color: '#fff',
                },
                rich: {
                  label: {
                    fontSize: 14,
                    color: '#FFF',
                    padding: [4, 0, 4,]
                  }
                }
              },
              outline: {
                show: true,
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 0,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                      offset: 0, color: '#0b2355' // 0% 处的颜色
                    }, {
                      offset: 1, color: '#195b9d' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              }
            },
          ],
        }
      },

      // getChart1Data() {
        //     let data = this.qyChartData;
        //
        //     console.log('qyChartData=');
        //     console.log(data);
        //     let serie = {
        //         type: 'line',
        //     }
        //     return {
        //         grid: {
        //             bottom: 50,
        //             top: 56,
        //             left: 58,
        //             right: 55
        //         },
        //         tooltip: this.getTooltipItem(),
        //         colors: ['#0884FF', '#64E6E2', '#FFA00A'],
        //         legend: {
        //             icon: 'rect',
        //             itemWidth: 8,
        //             itemGap: 24,
        //             itemHeight: 8,
        //             textStyle: {
        //                 color: '#FFF',
        //                 fontSize: 16
        //             },
        //             // right: 24,
        //             top: 20
        //         },
        //         xAxis: {
        //             data: data.map(e => e.name),
        //             axisLabel: {
        //                 color: '#FFF'
        //             },
        //             axisTick: {show: false},
        //             name: '月份',
        //             nameLocation: 'start',
        //             nameTextStyle: {
        //                 color: '#FFF',
        //                 lineHeight: 28,
        //                 verticalAlign: "top",
        //             },
        //
        //             axisLine: {
        //                 show: false,
        //             },
        //             nameGap: 10
        //         },
        //         yAxis:[{
        //             name: '次数',
        //             nameTextStyle: {
        //                 color: '#FFF',
        //                 fontSize: 16,
        //                 padding: [0, 0, 0, -40],
        //                 opacity: 0.72
        //             },
        //             axisLabel: {
        //                 color: '#FFF'
        //             },
        //             splitLine: {
        //                 lineStyle: {
        //                     color: 'rgba(255,255,255, 0.16)',
        //                     type: 'dashed',
        //                     dashOffset: 2
        //                 }
        //             },
        //         },{
        //             name: '人数',
        //             nameTextStyle: {
        //                 color: '#FFF',
        //                 fontSize: 16,
        //                 padding: [0, -40, 0, 0],
        //                 opacity: 0.72
        //             },
        //             axisLabel: {
        //                 color: '#FFF'
        //             },
        //             splitLine: {
        //                 lineStyle: {
        //                     color: 'rgba(255,255,255, 0.16)',
        //                     type: 'dashed',
        //                     dashOffset: 2
        //                 }
        //             },
        //         }],
        //          series:[{
        //             name: '服务剧组次数',
        //             data: data.map(e => e.value),
        //             yAxisIndex: 0,
        //             lineStyle: {color: 'rgba(8,132,255,1)'},
        //             areaStyle: {
        //                 color: {
        //                     type: 'linear',
        //                     x: 0, y: 0,
        //                     x2: 0, y: 1,
        //                     colorStops: [{
        //                         offset: 0, color: 'rgba(8,132,255,0.0)'
        //                     }, {
        //                         offset: 0.8, color: 'rgba(8,132,255,0.3)'
        //                     }, {
        //                         offset: 1, color: 'rgba(8,132,255,0.4)'
        //                     }]
        //                 }
        //             },
        //             ...serie
        //         },{
        //             name: '安排群演工作人数',
        //             data: data.map(e => e.value2),
        //             yAxisIndex: 1,
        //             lineStyle: {color: 'rgba(100,230,226,1)'},
        //             areaStyle: {
        //                 color: {
        //                     type: 'linear',
        //                     x: 0, y: 0,
        //                     x2: 0, y: 1,
        //                     colorStops: [{
        //                         offset: 0, color: 'rgba(100,230,226,0)'
        //                     }, {
        //                         offset: 0.8, color: 'rgba(100,230,226,0.3)'
        //                     },{
        //                         offset: 1, color: 'rgba(100,230,226,0.4)'
        //                     }]
        //                 }
        //             },
        //             ...serie}
        //         ]
        //
        //     }
        // },
        getChart2Data() {
            let serie = {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            }
            let data = this.zsqkChartData;

            console.log('zsqkChartData=');
            console.log(data);
            return {
                // tooltip: this.getTooltipItem(),
                title: {
                    text: '近五年东阳影视学院招生情况',
                    textStyle: {
                        color: '#FFF', fontSize: 16,
                    },
                    left: 'center',

                },
                grid: {
                    bottom: 50,
                    top: 35,
                    left: 58,
                    right: 35
                },
                xAxis: {
                    data: data.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '年份',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis: [{
                    name: '人数',
                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 16,
                        padding: [0, 0, 0, -45]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                series: [{
                    name: '招生情况',
                    data: data.map(e => e.value1),
                    yAxisIndex: 0,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(255,160,10,1)'
                            }, {
                                offset: 0.5, color: 'rgba(255,160,10,0.5)'
                            }, {
                                offset: 0, color: 'rgba(8,132,255,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#64E6E2',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                }]
            }
        },
        getTooltipItem() {
            return {
                borderWidth: 1,
                borderColor: 'rgba(8,132,255,0.4)',
                backgroundColor: 'rgba(2,32,61,0.72)',
                trigger: 'axis',
                formatter: function(params) {
                    console.log(params)
                    let child = '';
                    for(let i = 0; i < params.length; i++) {
                        child += `<div style="display:flex;align-items:center;color:#FFF;font-size:16px;padding:8px 0">
                        <div style="width:8px;height:8px;background:${typeof(params[i].color) == 'string' ? params[i].color: params[i].color.colorStops[0].color};"></div>
                        <div style="padding-left:8px">${params[i].seriesName}</div>
                        <div style="color:#64E6E2;padding:0 4px">${params[i].data}</div>
                        <div style="opacity:0.72">${i == 2 ? '个': '人'}</div>
                        </div>`
                    }
                    return child;

                }
            }
        },
    }
}
</script>
<style lang="less" scoped>
.container {
    // background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.12) 100%);
    box-sizing: border-box;
    width: 100%;
}
.dashDivider {
  margin: 0 20px 0 20px;
  height: 1px;
  background-image: linear-gradient(to right, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 50%, transparent 50%);
  background-size: 4px 1px;
  margin-top: 20px;
  background-repeat: repeat-x;
}
.flex {
    display: flex;
}
img {
    width: 24px;
    height: 24px;
}
.label {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.value {
    font-family: DINPro-Medium;
    font-size: 16px;
    color: #FFF;
    letter-spacing: 0.96px;
    padding: 0 3px;
    font-weight: 500;
}
.unit {
    opacity: 0.72;
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    font-weight: 400;
}
.flexbox{
  display: flex;
  justify-content: space-between;
  &>div{
    flex:1
  }
}
.rcfwbox{
  width:162px;
  height:148px;
  margin-top:30px;
  background:url(../../assets/hybg.svg) no-repeat left top;
  .rcfwcontent{
    padding:20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top:55px;
    &:nth-child(1){
      background-image:url(../../assets/hydot1.svg);
      background-repeat:no-repeat;
      background-position: 10% 20px;
      background-size: 30px 30px ;
    }
  }
  &:nth-child(2){
    .rcfwcontent{
      background-image:url(../../assets/hydot2.svg);
      background-repeat:no-repeat;
      background-position: 10% 20px;
      background-size: 24px 24px ;
    }

  }

}
.txtbox{
    line-height: 24px;
    text-align: left;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0.96px;
    margin: 0;
    padding: 0;
    span{
      font-family: DINPro-Medium;
      font-size: 20px;
      color: #FFFFFF;
      letter-spacing: 1.2px;
      &.bluekey{
        font-size: 16px;
        color: #64E6E2;
        letter-spacing: 0.96px;
        font-weight: 600;
        padding:0 5px;
      }
    }
    b{
      color: rgba(255,255,255,.7);
      font-weight: normal;
    }

}

.chart {
  position: relative;
  &::before {
    content: " ";
    width: 100%;
    height: calc(100% - 20px);
    position: absolute;
    background-image: url('../../assets/circle_bg.svg');
    background-size: auto 100%;
    left: 0;
    top: 10px;
    background-position: center center;
    background-repeat: no-repeat;
  }
}
</style>
